<!--
 * @Description: 报告详情
 * @Author: jiansheng
 * @Date: 2024-11-17 14:39:49
 -->
<template>
  <div class="view_body">
    <van-button class="warning_btn" :disabled="posterLoading" :loading="posterLoading" icon="share" type="primary" @click="showShare = true"></van-button>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="shareSelect" />

    <div class="detail_page">
      <div class="item two_item">
        <div>
          <ul v-if="imgList.length > 6" class="five_img">
            <li><img :src="imgList[0]" alt="" /></li>
            <li><img :src="imgList[1]" alt="" /></li>
            <li><img :src="imgList[2]" alt="" /></li>
            <li><img :src="imgList[3]" alt="" /></li>
            <li><img :src="imgList[4]" alt="" /></li>
            <li><img :src="imgList[5]" alt="" /></li>
            <li><img :src="imgList[6]" alt="" /></li>
          </ul>
        </div>
      </div>

      <div class="item">
        <ul v-if="imgList.length > 10" class="four_img">
          <li><img :src="imgList[7]" alt="" /></li>
          <li><img :src="imgList[8]" alt="" /></li>
          <li><img :src="imgList[9]" alt="" /></li>
          <li><img :src="imgList[10]" alt="" /></li>
        </ul>
      </div>

      <div class="item last_item">
        <div class="last_img"></div>
      </div>

      <div class="item last_last_item">
        <div class="last_img21"></div>
        <div class="last_img22"></div>
        <div class="last_img23"></div>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      imgList: [],
      posterLoading: false,
      loadingText: '生成图片',
      posterImg: '',

      showShare: false,
      options: []
    }
  },
  created() {
    if (this.isWx) {
      this.options = [{ name: '复制链接', icon: 'link' }]
    } else {
      this.options = [
        { name: '复制链接', icon: 'link' },
        { name: '下载图片', icon: 'poster' }
      ]
    }

    this.getDetailFun()
  },
  methods: {
    async getDetailFun() {
      this.imgList = [
        'https://assets.lummi.ai/assets/QmdCpMXRQHUqUCHTQKJjdQLfWtYBU8AXyv77SHZHAA7sB9?auto=format&w=1500',
        'https://assets.lummi.ai/assets/QmYwdiJib8xNL4D1RJrNmnnDJZsmBcpmmKKQXjSTWdhksz?auto=format&w=1500',
        'http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280',
        'http://gips0.baidu.com/it/u=3560029307,576412274&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
        'http://gips0.baidu.com/it/u=2298867753,3464105574&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
        'http://gips0.baidu.com/it/u=1370402140,2009956566&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
        'https://assets.lummi.ai/assets/QmQXhD8pZjYvU8ywpNKFKUYtgXpKBamW866oRmvT3xSnz4?auto=format&w=1500',
        'http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
        'http://gips3.baidu.com/it/u=3557221034,1819987898&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
        'https://gips1.baidu.com/it/u=926030969,4240391978&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f576_1024',
        'http://gips3.baidu.com/it/u=3892227616,2240763844&fm=3028&app=3028&f=JPEG&fmt=auto?w=3200&h=3200'
      ]
    },
    async copyToClipboard(text) {
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      this.$toast('已复制到剪切板')
    },
    shareSelect(option) {
      switch (option.icon) {
        case 'link':
          this.copyToClipboard(location.href)
          break
        case 'poster':
          this.createPoster()
          break
        default:
      }
    },
    createPoster() {
      if (this.posterLoading) return

      this.$set(this.options[1], 'name', '生成中..')
      this.posterLoading = true
      const vm = this
      const domObj = document.querySelector('.detail_page')
      html2canvas(domObj, {
        scale: 2,
        useCORS: true,
        allowTaint: true,
        logging: true
        // letterRendering: true,
      }).then(function (canvas) {
        vm.posterImg = canvas.toDataURL('image/png')

        vm.$set(vm.options[1], 'name', '下载图片')
        vm.posterLoading = false

        vm.downLoadImg(vm.posterImg, 'img_background')
      })
    },
    downLoadImg(imgUrl, fileName = 'poster') {
      const imgData = imgUrl.split(',')[1] // 从Data URL中提取图片数据部分
      const byteString = atob(imgData) // 解码base64数据
      const arrayBuffer = new ArrayBuffer(byteString.length)
      const view = new Uint8Array(arrayBuffer)

      // 将解码的字符数据转换为Uint8Array
      for (let i = 0; i < byteString.length; i++) {
        view[i] = byteString.charCodeAt(i)
      }

      // 创建Blob对象
      const blob = new Blob([arrayBuffer], { type: 'image/png' })

      // 如果浏览器支持FileSaver API，使用它进行下载
      if (window.saveAs) {
        // 使用 FileSaver.js 库（需先引入 FileSaver.js）
        window.saveAs(blob, fileName + '.png')
      } else {
        // 如果浏览器不支持 FileSaver，则使用临时的<a>标签下载
        const a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = fileName + '.png'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }
  }
}
</script>
<style lang="less" scoped>
canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.view_body {
  width: 100vw;
  overflow-x: hidden;
}
.item_home {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .item_home_in {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    p {
      font-size: 30px;
      &.act_name {
        font-size: 26px;
        margin-bottom: 20px;
      }
    }
    div {
      color: #fff;
      font-size: 26px;
      margin-top: 15vh;
      text-align: center;
      font-weight: 700;
    }
  }
}
.item {
  min-height: 100vh;
  width: 100%;
  background: url('../../assets/img/item_bg.png') no-repeat center;
  background-size: cover;
  padding: 30px 30px;
  color: #fff;
  font-size: 13px;
  position: relative;

  .item_title {
    display: flex;
    justify-content: center;
    align-items: center;
    .title_text {
      width: 100%;
      height: 80px;
      font-size: 16px;
      line-height: 80px;
      text-align: center;
      color: green;
      background: url('../../assets/img/title_bg.png') no-repeat center;
      background-size: contain;
      font-weight: bold;
    }
  }
}

.two_item {
  width: 100%;
  padding: 0;
  div {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 30px 30px;
  }
  img {
    &.img1 {
      position: absolute;
      width: 60px;
      top: 40vh;
      right: -10px;
    }
    &.img2 {
      position: absolute;
      width: 40px;
      top: 60vh;
      left: 0px;
      transform: rotate(-40deg);
    }
  }
}

.five_img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
  li {
    list-style: none;
    height: 17vh;
    background-size: cover !important;
    &:nth-child(7) {
      order: 4;
      grid-column: span 2;
      height: 36vh;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

.four_img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
  li {
    list-style: none;
    height: 50vh;
    background-size: cover !important;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
}

.item_card {
  margin-top: 20px;
  .h5 {
    display: inline-block;
    background: rgba(0, 46, 0, 0.38);
    padding: 5px 15px;
    font-size: 13px;
    font-weight: bold;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  div {
    padding: 10px;
    border-radius: 3px;
    line-height: 1.6;
    background-color: rgba(0, 46, 0, 0.32);
    border-top-left-radius: 0;
  }
}

.last_item {
  .img_icon {
    height: 10vh;
    position: relative;
    img {
      width: 15vw;
      position: absolute;
      &:last-child {
        right: 0;
        bottom: 10vh;
        width: 20vw;
      }
    }
  }
  .last_desc {
    padding: 30px 0;
    p {
      font-size: 13px;
      line-height: 2;
    }
  }
  .last_img {
    height: 90vh;
    background: url('https://assets.lummi.ai/assets/QmanJZ6C4WVKeBjKfXVtopDGgzqhejcNorrkQUFRk7KCbS?auto=format&w=1500') no-repeat center / cover;
  }
}

.last_last_item {
  .last_img21 {
    height: 30vh;
    margin-bottom: 10px;
    background: url('https://assets.lummi.ai/assets/QmanJZ6C4WVKeBjKfXVtopDGgzqhejcNorrkQUFRk7KCbS?auto=format&w=1500') no-repeat center / cover;
  }
  .last_img22 {
    height: 30vh;
    margin-bottom: 10px;
    background: url('https://assets.lummi.ai/assets/QmYezgpHaG67Rj8KXW63GJ8FZXMKRVLd2Bbt5hV5Cc929b?auto=format&w=1500') no-repeat center / cover;
  }
  .last_img23 {
    height: 30vh;
    margin-bottom: 10px;
    background: url('https://assets.lummi.ai/assets/QmbrrsbDFDCaFdZcdgVkbVuQMLhq8GgJh9H7MRhD4aWaRj?auto=format&w=1500') no-repeat center / cover;
  }
}

.warning_btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
